<template>
  <header>
    <div class="nav">
      <div class="nav_left">     
          <i class="iconfont icon-31dianhua"></i>
          <span style="margin-right:40px">800-800-8848</span> 
          <i class="iconfont icon-shizhong"></i>
          <span>I do not work</span>  
      </div>
      <div class="nav_right">
           <i class="iconfont icon-ren111" @click="login"></i>
           <i class="iconfont icon-liebiao1"></i>
      </div>
    </div>
    <div class="logo">
      <img src="../assets/img/logo.svg" alt=""  @click="goHome">
      <div class="city">
      </div>
    </div>

    <!-- <login-view 
      :dialogVisible='dialogVisible'
      @cancel = 'dialogVisible = false'
      :currentType='currentType'
    ></login-view> -->

    <!-- <dialog-view
      :dialogVisible = 'dialogVisible'
      @cancel='cancel'
    ></dialog-view> -->
  </header>
  
</template>

<script>
import loginView from '@/views/Dialog/login.vue';
import DialogView from '@/views/Dialog/Dialog.vue';


export default {
  name:'Nav',
  data() {
    return {
      dialogVisible:false,
      currentType:0, // 0 表示登录，1表示注册
    }
  },
  
  components:{
    loginView,
    DialogView
  },
  updated() {
    console.log('更新');
  },
  methods: {
    login(){
      console.log('点击了登录');
      // this.dialogVisible = true
      this.$router.push('/login')
    },
    goHome(){
      this.$router.push('/')

    },
    cancel(){
      console.log('点击关闭 -- nav');
      this.dialogVisible = false
    }
  },

}
</script>

<style lang='less' scoped >
.nav{
  height: 46px;
  padding: 0 50px;  
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: black;
  color: white;
  
  .iconfont{
    font-size: 30px;
    vertical-align: middle;
  }
  .nav_left{
    float: left;
    span{
      margin-left: 10px;
    }
  }
  .nav_right{
    float: right;
    i{
      margin-right: 20px;
    }
  }
}

.logo{
  height: 134px;
  border: 1px solid red;
  display: flex;
  align-items: center;
  justify-content: space-between;
  img{
    width: 300px;
    height: 100px;
    margin-left: 50px;
  }
  .city{
    width: 500px;
    height: 100px;
    border: 1px solid red;
    
  }
}


</style>